
html,body {
    margin: 0;
    padding: 0;
    height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: pink;
}


.container {
    position: relative;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    transform-origin: center center;
    animation: rotate 10s linear infinite;
}

@keyframes rotate {
    100% {
        transform: rotate3d(1,1,1,360deg);
    }
}

@keyframes light {
    0% {
        box-shadow: 0 0 0 0 rgb(255, 255, 255, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    }
}

.light {
    animation: light 1s infinite;
}

[class*="side"] {
    position: absolute;
    width: 300px;
    height: 300px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-sizing: border-box;
    border-left: 12px solid #ddd;
    border-right: 12px solid #ddd;
    border-top: 12px solid #ddd;
    border-bottom: 12px solid #ddd;
}

.side1 {
    transform: translate3d(0,0,150px);
    background-image: url("https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b1f9a4f35d5e4cf0b44a0a2e27f0ae5f~tplv-k3u1fbpfcp-jj-mark:300:300:300:300:q75.avis");
}
.side2 {
    transform: translate3d(0, 0, -150px) rotateY(180deg);
    background-image: url("https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b1f9a4f35d5e4cf0b44a0a2e27f0ae5f~tplv-k3u1fbpfcp-jj-mark:300:300:300:300:q75.avis");
}

.side3 {
    transform: translate3d(0, -150px, 0) rotateX(90deg);
    background-image: url("https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d6159b78ff704034a4ebf06b7093cadc~tplv-k3u1fbpfcp-watermark.image?");
}

.side4 {
    transform: translate3d(0, 150px, 0) rotateX(90deg) rotateY(180deg);
    background-image: url("https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c0d3cb14bc8648b7a14d7e795a628f02~tplv-k3u1fbpfcp-watermark.image?");
}

.side5 {
    transform: translate3d(-150px, 0, 0) rotateY(90deg);
    background-image: url("https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8cadd5ea9f59479996c20b3e5619c4fd~tplv-k3u1fbpfcp-watermark.image?");
}

.side6 {
    transform: translate3d(150px, 0, 0) rotateY(90deg) rotateY(180deg);
    background-image: url("https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/dc92dc8a2a0f42f187e108f803fa903d~tplv-k3u1fbpfcp-watermark.image?");
}